<template>
	<view class="container">
		<image class="header" :src="data.kefu.img" mode=""></image>
		<view class="content">
			<image class="topimg" src="https://img.fubaozx.cn/static/oldImg/16980498402464.png" mode=""></image>
			<view class="toptitle">
				Hi,我是小帮，您是否遇到了以下问题？
			</view>
			<z-tabs v-if="data.tablist.length!=0" ref="tabs" :current="data.tab" @change="tabsChange"  active-color="#FA301B" :list="data.tablist"></z-tabs>
			<view class="list">
				<view class="item" v-for="(item,index) in data.newsList" :key="item.ID"  @click="$goURl('/pages/news/newsDetails?id='+item.ID)">
					<view class="left">
						{{index+1}}
					</view>
					<view class="right">
						{{item.title}}
						<uni-icons type="forward" color="#999" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<empty v-if="data.newsList.length==0"></empty>
		</view>
		<view class="footers"></view>
		<view class="footer" @click="call">
			<image src="https://img.fubaozx.cn/static/oldImg/16980498281123.png" mode=""></image>电话客服
			<!-- <a href="tel:+400-200-3000">400-200-3000</a> -->
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		tablist:[],
		tab:0,
		page:1,
		pages:1,
		size:50,
		newsList:[],
		kefu:{}
	})
	onLoad((option)=>{
	})
	onShow(()=>{
		proxy.$request({
			url:`api/navigationList/?page=1&size=50&code=1`,
			method:'GET',
			success:(res)=>{
				data.tablist = res.data.data
				if(res.data.data.length!=0){
					newsList()
				}

			}
		})
		proxy.$request({
			url:`api/customerGet/`,
			method:'GET',
			success:(res)=>{
				data.kefu = res.data
			}
		})

	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	function tabsChange(e){
		data.tab=e
		data.newsList = []
		newsList()
	}
	function call(){
		uni.makePhoneCall({
			phoneNumber: data.kefu.mobile
		});
	}

	function newsList (){
		proxy.$request({
			url:`api/newsList/${data.tablist[data.tab].ID}/?page=${data.page}&size=${data.size}`,
			method:'GET',
			success:(res)=>{
				data.newsList = res.data.data

			}
		})
	}
</script>

<style lang="scss" >
	.container{
		padding: 20upx;
		.header{
			width: 100%;
			height: 35vw;
		}
		.content{
			position: relative;
			margin-top: 50px;
			background-color: #fff;
			border-radius: 20upx;
			padding-top: 20px;
			.toptitle{
				position: absolute;
				background-color: #fff;
				top: -40px;
				left: 60px;
				font-size: 12px;
				padding: 5upx 10upx;
				border-radius: 10upx;
			}
			.topimg{
				position: absolute;
				width: 52px;
				height: 52px;
				top: -40px;
			}
			.list{
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20upx;
					.left{
						width: 10%;
						padding-bottom: 20upx;
						text-align: center;
						font-size: 18px;
					}
					.right{
						width: 90%;
						font-size: 14px;
						font-weight: bold;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1upx solid #eee;
						padding-bottom: 20upx;
					}
					padding: 20upx;
				}
			}
		}
		.footers{
			width: 100%;
			height: 60px;
		}
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			height: 60px;
			background-color: #fff;
			width: 100%;
			text-align: center;
			display:flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: bold;
			image{
				width: 20px;
				height: 20px;
				margin-right: 20upx;
			}
		}
	}
</style>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
